/**
* 视频 观看
*/
<template>
  <div :class="getName">
    <div class="h-model-title mt30">
      <h3>TVC-SHOW</h3>
    </div>
    <article class="h-show">
      <!-- <aside class="h-aside fl">
        <dl v-for="item in list" :key="item.id">
          <dt>{{ item.name }}</dt>
          <dd v-for="val in item.list" :key="val.id" @click="handleUrlClick(val)">
            {{ val.name }}
          </dd>
        </dl>
      </aside> -->
      <section class="h-section fr">
        <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions"
          :playsinline="true" customEventName="customstatechangedeventname"
          @play="onPlayerPlay($event)" @ready="playerReadied"></video-player>
      </section>
    </article>
  </div>
</template>
<script>
import { videoList } from '@/mock' // 视频播放 列表 数据
import { videoData } from '@/api'
import { videoPlayer } from 'vue-video-player'
export default {
  name: 'TvShow',
  components: { videoPlayer },
  props: {},
  data () {
    return {
      list: [],
      terminal: '', // 终端类型
      playerOptions: {
        muted: false,
        width: '750',
        height: '500',
        aspectRatio: '16:9',
        html5: {hls: {withCredentials: true }},
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        language: 'zh-CN',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          src: "http://web.zgjyfzb.com/uploadfiles/video/movie.mp4"
        }],
        poster: "",
      }
    }
  },
  computed: {
    getName(){
      if(this.terminal === 'pc'){
        return 'h-tv'
      } else {
        return 'h-tv h-ph'
      }
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    if(this.terminal === 'ph'){
      this.playerOptions.width = '100%'
      this.playerOptions.height = 'auto'
    }
    console.log('this.terminal***', this.terminal)
    // this.getVideoData() // 视频列表 数据加载
  },
  mounted () {
    this.list = videoList.result // 使用接口时 此处删除
  },
  methods: {
    getVideoData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      videoData(params).then(res => {
        this.list = res
      })
    },
    /**
     *@Description
     *@Param
     *@Return 点击视频列表 切换播放地址.
     **/
    handleUrlClick(item){
      this.playerOptions.sources[0].src = item.url
    },
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-show {
    height: 500px;
    margin: 30px 0;
    background: rgb(249, 183, 195);
  }
  .h-aside{
    width: 300px;
    box-sizing: border-box;
    padding: 30px 20px;
    dl{
      margin-bottom: 5px;
      line-height: 20px;
      color: #fff;
    }
    dd{
      position: relative;
      padding-left: 20px;
      font-size: 12px;
      cursor: pointer;
      &:before{
        position: absolute;
        left: 8px;
        content: "";
        width: 6px;
        height: 6px;
        margin-top: 7px;
        border-radius: 100%;
        background: #fff;
      }
      &:hover{
        color: #333;
        text-decoration: underline;
      }
    }
  }
  .h-section{
    width: calc(100% - 305px);
    height: 100%;
  }
  /* 移动端 */
  .h-tv.h-ph{
    .h-show{
      background: #fff;
      dt{
        padding: 5px 10px;
        background: #900027;
      }
      dd{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #000;
      }
    }
    .h-aside, .h-section{
      width: 100%;
      height: auto;
    }
    /* 手机端 播放按钮 居中 */
    /deep/ .vjs-big-play-button{
      top: 50%;
      left: 50%;
      margin-left: -45px;
      margin-top: -23px;
    }
  }
</style>
